<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LLM智能对话助手</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
</head>
<body>
    <div class="container">
        <main class="main-content">
            <div class="chat-container">
                <div class="messages-container" id="messagesContainer">
                    <!-- 欢迎消息已在下一步删除 -->
                </div>

                <div class="input-container">
                    <div class="input-wrapper">
                        <div class="image-upload-container">
                            <input type="file" id="imageInput" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">
                            <button class="image-upload-button" onclick="document.getElementById('imageInput').click()" title="上传图像">
                                <span class="upload-icon">🖼️</span>
                            </button>
                            <div id="imagePreview" class="image-preview" style="display: none;"></div>
                            <button id="removeImageButton" class="remove-image-button" onclick="removeImage()" style="display: none;">×</button>
                        </div>
                        <textarea 
                            id="messageInput" 
                            placeholder="输入你的消息..." 
                            rows="1"
                            maxlength="2000"
                        ></textarea>
                        <button class="send-button" id="sendButton" onclick="sendMessage()">
                            <span class="send-icon">📤</span>
                        </button>
                    </div>
                    <div class="input-footer">
                        <span class="char-count" id="charCount">0/2000</span>
                        <div class="status-controls">
                            <span class="status-indicator" id="connectionStatus">
                                <span class="status-dot" id="statusDot"></span>
                                <span id="statusText">未连接</span>
                            </span>
                            <button class="btn btn-secondary btn-small" onclick="clearConversation()">清空对话</button>
                        </div>
                        <span class="tips">按 Ctrl+Enter 发送消息</span>
                    </div>
                </div>
            </div>

            <aside class="sidebar">
                <div class="sidebar-section">
                    <h3>💡 功能演示</h3>
                    <div class="demo-buttons">
                        <!-- 数学计算子菜单 -->
                        <div class="submenu-container">
                            <button class="demo-btn submenu-toggle" onclick="toggleSubmenu('math', event)">
                                🧮 数学计算
                            </button>
                            <div class="submenu-content" id="math-submenu">
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('帮我计算 25 * 36 + 128')">
                                    🔢 基础运算
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('计算 sin(30度) 的值')">
                                    📐 三角函数
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('帮我计算 √144 的值')">
                                    📊 开方运算
                                </button>
                            </div>
                        </div>
                        <!-- 音乐控制子菜单 -->
                        <div class="submenu-container">
                            <button class="demo-btn submenu-toggle" onclick="toggleSubmenu('music', event)">
                                🎵 音乐控制
                            </button>
                            <div class="submenu-content" id="music-submenu">
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('查看可播放的音乐列表')">
                                    📋 音乐列表
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('随机播放一首歌曲')">
                                    🎲 随机播放
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('停止播放')">
                                    ⏹️ 停止播放
                                </button>
                            </div>
                        </div>
                        <!-- 音量控制子菜单 -->
                        <div class="submenu-container">
                            <button class="demo-btn submenu-toggle" onclick="toggleSubmenu('volume', event)">
                                🔊 音量控制
                            </button>
                            <div class="submenu-content" id="volume-submenu">
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('音量增加0.1')">
                                    ➕ 音量增加
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('音量减小0.1')">
                                    ➖ 音量减小
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('音量调整到最大')">
                                    🔊 音量调整到最大
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('音量调整到最小')">
                                    🔈 音量调整到最小
                                </button>
                            </div>
                        </div>
                        <!-- 机械臂控制子菜单 -->
                        <div class="submenu-container">
                            <button class="demo-btn submenu-toggle" onclick="toggleSubmenu('robotic-arm', event)">
                                🤖 机械臂控制
                            </button>
                            <div class="submenu-content" id="robotic-arm-submenu">
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('机械臂向前移动5厘米')">
                                    ⬆️ 机械臂前进
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('机械臂向后移动5厘米')">
                                    ⬇️ 机械臂后退
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('机械臂向左移动5厘米')">
                                    ⬅️ 机械臂左移
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('机械臂向右移动5厘米')">
                                    ➡️ 机械臂右移
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('机械臂向上移动5厘米')">
                                    🔼 机械臂向上
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('机械臂向下移动5厘米')">
                                    🔽 机械臂向下
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('机械臂复位')">
                                    🔄 机械臂复位
                                </button>
                            </div>
                        </div>
                        
                        <!-- 云台控制子菜单 -->
                        <div class="submenu-container">
                            <button class="demo-btn submenu-toggle" onclick="toggleSubmenu('gimbal', event)">
                                📹 云台控制
                            </button>
                            <div class="submenu-content" id="gimbal-submenu">
                                <!-- 基础移动 -->
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台向左旋转60度')">
                                    ⬅️ 云台左转
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台向右旋转60度')">
                                    ➡️ 云台右转
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台向上旋转60度')">
                                    🔼 云台上转
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台向下旋转60度')">
                                    🔽 云台下转
                                </button>
                                
                                <!-- 角落快捷移动 -->
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台移动到左上角')">
                                    ↖️ 左上角
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台移动到右上角')">
                                    ↗️ 右上角
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台移动到左下角')">
                                    ↙️ 左下角
                                </button>
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台移动到右下角')">
                                    ↘️ 右下角
                                </button>
                                
                                <!-- 复位 -->
                                <button class="demo-btn submenu-item" onclick="sendDemoMessage('云台复位')">
                                    🔄 云台复位
                                </button>
                            </div>
                        </div>
                        <button class="demo-btn" onclick="sendImageDemoMessage('/static/猫.jpg', '请分析图像当中的内容')">
                            🖼️ 图像分析
                        </button>
                        <button class="demo-btn" onclick="sendDemoMessage('你有哪些功能？')">
                            ❓ 功能介绍
                        </button>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3>🔧 系统信息</h3>
                    <div class="system-info" id="systemInfo">
                        <div class="info-item">
                            <span class="info-label">模型:</span>
                            <span class="info-value" id="modelName">加载中...</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Function Calling:</span>
                            <span class="info-value" id="fcStatus">加载中...</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">MCP集成:</span>
                            <span class="info-value" id="mcpStatus">加载中...</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">对话历史:</span>
                            <span class="info-value" id="historyCount">0条</span>
                        </div>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3>🛠️ 可用工具</h3>
                    <div class="tools-list" id="toolsList">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </aside>
        </main>
    </div>

    <!-- 加载提示 -->
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="loading-spinner"></div>
        <div class="loading-text">AI正在思考中...</div>
    </div>

    <!-- 通知消息 -->
    <div id="notification" class="notification" style="display: none;">
        <span id="notificationText"></span>
        <button onclick="hideNotification()" class="notification-close">×</button>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>
